<template>
  <div class="online-left">
    <h3>在线留言</h3>
    <form @submit.prevent="onSubmit">
      <div class="box name">
        <span>姓名</span>
        <input type="text" v-model="name" :placeholder="name" style="color: #fff">
      </div>
      <div class="box email">
        <span>邮箱</span>
        <input type="text" v-model="email" style="color: #fff">
      </div>
      <div class="box msg">
        <span>信息</span><br /><br /><br />
        <textarea name="" id="" v-model="about" style="color: #fff"></textarea>
      </div>
      <button>点击发送</button>
    </form>
  </div>
</template>

<script>
import { send } from '@/api/onlineMess.js'
export default {
  name: 'OnlineLeft',
  data () {
    return {
      name: '',
      email: '',
      about: ''
    }
  },
  created () {
    if (sessionStorage.getItem('userName')) {
      this.name = sessionStorage.getItem('userName')
    } else {
      this.name = ''
    }
  },
  methods: {
    onSubmit () {
      if (this.name.length === 0 && this.email.length === 0 && this.about.length === 0) {
        alert('内容不能为空')
      } else {
        send(this.about, this.name, this.email).then(res => {
          if (res.data.code === 200) {
            alert('发送成功')
          } else {
            alert('网络错误，请重试')
          }
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped src="./onlineleft.scss">
</style>
